@import "./pxtovw";
@import "./footer";
@mixin center{
    width: vw(704);
    margin: 0 auto;
   
}
header{
    @include center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: vw(50);
    .back{
        width: vw(123);
        height: vw(57);
        border: 2px solid #ff9344;
        border-radius: vw(15);
        font-size: vw(30);
        color: black;
        text-align: center;
        line-height: vw(50);
    }
    .hd-name{
        font-size: vw(30);
    }
    .select{
        select{
           width: vw(160);
           height: vw(60);
           appearance:none;
           font-size: vw(30);
           border: 2px solid #ff9344;
           background-image: url(../img/index/header2.png);
           background-repeat: no-repeat;
           background-position:90%;
           padding-left: vw(15);
           option{
            font-size: vw(30);
           }
        }

    }   
}
section{
    @include center;
    margin-bottom: vw(110);
    .search{
        width: vw(268);
        height: vw(55);
        border: 2px solid #ff9344;
        border-radius: 15px;
        margin: vw(37) auto;   
        display: flex;
        justify-content: space-around;
        align-items: center;
        overflow: hidden;
        input{
        width: vw(200);
        height: vw(26);
        font-size: vw(20);
        border: 0px;
        outline: none;
        padding-left: vw(30);
         }
        button{
        width: vw(40);
        height: vw(40);
        border: none;
        background-image: url(../img/index/header1.png);
        background-repeat: no-repeat;
        background-color: white;
        background-size: cover;
        outline: none;
        }
    }
    p{
        text-align: center;
        font-size: vw(25);
    }
    .kind{ 
        width: vw(515);
        height: vw(140);
        margin: vw(15) auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        div{
            width: vw(125);
            height: vw(65);
            background-color:#dcdcdc;
            text-align: center;
            line-height: vw(65);
            font-size:vw(20) ;
            color:#898989;
            &:hover{
                background-color:#ff9344;
                color: white;
            }
        }
    }
    .content{
        .cn-top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: vw(35);
            .top-lf{
                display: flex;
                align-items: center;
                p{
                    font-size: vw(30);
                }
                img{
                    width: vw(60);
                    height: vw(60);
                    vertical-align: middle;
                }
            }      
            .top-rg{
                display: flex;
                align-items: center;
                p{
                    font-size: vw(27);
                }
                img{
                    width: vw(30);
                    height: vw(30);
                    vertical-align: middle;
                    }
            }
        }
        .cn-bottom{
            display: flex;
            justify-content: space-between;
            margin-top: vw(30);
            .bt-lf{
                width: vw(280);
                height: vw(350);
                img{
                    width:100%;
                    height: 100%;
                }  
            }
            .bt-rg{
                .rg-top{
                    width: vw(420);
                    height: vw(145);
                    overflow: hidden;
                    img{
                        width:100%;
                        // transform: rotate(270deg);
                    }
                }
                .rg-bottom{
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    margin-top: vw(10);
                    div{
                        width: vw(195);
                        height: vw(195);
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    } 
                }
            }

        }
        .recommend{
            display: flex;
            justify-content: space-between;
            margin-top: vw(35);
            div{
                width: vw(210);
                height: vw(200);
               
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}